/*
 * @Author: cygao
 * @Date: 2018-11-10 21:08:25
 * @Last Modified by: cygao
 * @Last Modified time: 2018-11-25 22:39:46
 */

import React, { Component } from 'react';
import { Toast } from 'react-weui';
import { connect } from "react-redux";
import {loadMore} from '../../../utils';
import * as actions from '../../../store/action/category';
import List from '../list/list';
import './cateDetail.less';

const LOGO_LIST_UP_ACTIVE = require("../../../static/images2/logo-up2.png");
const LOGO_LIST_UP = require("../../../static/images2/logo-up1.png");
const LOGO_LIST_DOWN_ACTIVE = require("../../../static/images2/logo-down2.png");
const LOGO_LIST_DOWN = require("../../../static/images2/logo-down1.png");
const LOGO_LIST_ROT = require("../../../static/images2/logo-list.png");
const LOGO_LIST_CARD = require("../../../static/images2/logo-list-2.png");

class Register extends Component {
    constructor() {
        super()
        this.state = {
          searchValue: '', // 搜索输入值
          listClass: 'list-col', //列表排列样式
          sort : '',
          filter1: true,
          filter2: true,
          filter3: true,
          // listData: [ // 列表数据
          //   {
          //     image: '../../static/images2/list-img.png',
          //     logo: '../../static/images2/list-logo.png',
          //     title: '测试女装大佬哇卡阿卡卡阿卡试女装大佬哇卡阿卡卡阿卡试女装大佬哇卡阿卡卡阿卡卡',
          //     oldprice: '30',
          //     salenumber:'111111',
          //     newprice:'20',
          //     coupon:'10'
          //   },
          //   {
          //     image: '../../static/images2/list-img.png',
          //     logo: '../../static/images2/list-logo.png',
          //     title: '测试女装大佬哇卡阿卡卡阿试女装大佬哇卡阿卡卡阿卡试女装大佬哇卡阿卡卡阿卡卡卡',
          //     oldprice: '30',
          //     salenumber:'111111',
          //     newprice:'20',
          //     coupon:'10'
          //   },
          //   {
          //     image: '../../static/images2/list-img.png',
          //     logo: '../../static/images2/list-logo.png',
          //     title: '测试女装大佬哇卡阿卡卡阿试女装大佬哇卡阿卡卡阿卡试女装大佬哇卡阿卡卡阿卡卡卡',
          //     oldprice: '30',
          //     salenumber:'111111',
          //     newprice:'20',
          //     coupon:'10'
          //   },
          //   {
          //     image: '../../static/images2/list-img.png',
          //     logo: '../../static/images2/list-logo.png',
          //     title: '测试女装大佬哇卡阿卡卡试女装大佬哇卡阿卡卡阿卡试女装大佬哇卡阿卡卡阿卡阿卡卡',
          //     oldprice: '30',
          //     salenumber:'111111',
          //     newprice:'20',
          //     coupon:'10'
          //   },
          //   {
          //     image: '../../static/images2/list-img.png',
          //     logo: '../../static/images2/list-logo.png',
          //     title: '测试女装大佬哇卡阿卡卡试女装大佬哇卡阿卡卡阿卡试女装大佬哇卡阿卡卡阿卡阿卡卡',
          //     oldprice: '30',
          //     salenumber: '111111',
          //     newprice: '20',
          //     coupon: '888',
          //     id: 1
          //   }
          // ]
        }
    }
    componentDidMount(){
      // if(!this.props.category.fetched){
        if(this.props.location.pathname.split('/')[2]){
          this.props.fetchCateList(this.props.location.pathname.split('/')[2], this.state.sort);
        }else{
          this.props.fetchNine();
        }
        this.setState({
          searchValue: this.props.location.pathname.split('/')[2]
        })


        loadMore(this.mainContent,this.props.fetchCateList);

      // }
    }
    // 搜索
    changeSearch(e) {
      this.setState({
        searchValue : e.target.value
      })
    }
    // enter触发搜索
    KeyUpEnter(e) {
      // 监控 enter 事件
      if (e.keyCode !== 13) {
        return
      }
      if (e.target.value) {
        //重置搜索
        this.resetSearch();
        this.props.fetchCateList(e.target.value);
      }else {
        alert('搜索条案不能为空')
      }
    } 

    resetSearch = () =>{
       //重置搜索
       this.props.category.cateList = [];
       this.props.category.page = 1;
    }

    changeFilter(item){
      //let title = this.state.searchValue || this.props.location.pathname.split('/')[2];
      switch (item){
        case '佣金':
          this.setState({
            filter1 : !this.state.filter1,
            sort: !this.state.filter1 ? 'tk_total_commi_asc' : 'tk_total_commi_des'
          })
          //重置搜索
          this.resetSearch();
          this.props.fetchCateList(this.state.searchValue, this.state.sort);
          break;
        case '销量':
          this.setState({
            filter2 : !this.state.filter2,
            sort : !this.state.filter2 ? 'total_sales_asc' : 'total_sales_des'
          })
          //重置搜索
          this.resetSearch();
          this.props.fetchCateList(this.state.searchValue, this.state.sort);
          break;
        case '价格':
          this.setState({
            filter3 : !this.state.filter3,
            sort :  this.state.filter3 ? 'price_asc' : 'price_des'
          })
          //重置搜索
          this.resetSearch();
          this.props.fetchCateList(this.state.searchValue, this.state.sort);
          break;
        case '切换展示':
          this.setState({
            listClass : this.state.listClass === 'list-col' ? 'list-row': 'list-col'
          });
          break;
      }
    }
    back = () =>{
        this.props.history.go(-1);
    }
    getFilterByIndex(index) {
      switch(index) {
        case 0: return !this.state.filter1;
        case 1: return !this.state.filter2;
        case 2: return !this.state.filter3;
      }
    }
    renderCateIcon(title, index) {
      console.log("icon " + title + " index is;", index);
      if (index == 3) {
        return (
          <div>
            <img src={this.state.listClass === 'list-col' ? LOGO_LIST_ROT : LOGO_LIST_CARD} alt="" className="cat-icon-switch" />
          </div>
        )
      } else {
        var filter = this.getFilterByIndex(index);
        var imgUP = filter ? LOGO_LIST_UP_ACTIVE : LOGO_LIST_UP;
        var imgDown = filter ? LOGO_LIST_DOWN : LOGO_LIST_DOWN_ACTIVE;
        return (
          <div className="cat-icon-container">
            <span>{title}</span>
            <span className="cat-icon-col">
              <img src={imgUP} alt="" className="cat-icon" />
              <img src={imgDown} alt="" className="cat-icon" />
            </span>
          </div>
        )
      }
    }

    render() {
        return (
            <div>
              
              <div className="cate-search">
                  <img className="search-back" src={require('../../../static/images2/logo-back1.png')} alt="" onClick={this.back}/>
                  <div className="search-input">
                    <img className="logo-search" src={require('../../../static/images2/logo-search.png')} alt="" />
                    <input
                        type="text"
                        name="phoneNumber"
                        placeholder="输入您需要的商品名称"
                        onChange={this.changeSearch.bind(this)}
                        onKeyUp={this.KeyUpEnter.bind(this)}
                        value={this.state.searchValue}
                    />
                  </div>
                </div>
                <div className="detail-tab">
                  {['佣金','销量','价格','切换展示'].map((item, index) => {
                    return (
                      <div className="tab-item" key={index} onClick={this.changeFilter.bind(this, item)}>
                        {this.renderCateIcon(item, index)}
                      </div>)
                  })}
                </div>
                <div id="category-detail" ref={ref=>this.mainContent=ref}>
                    <Toast icon="loading" show={this.props.category.fetching}>Loading...</Toast>
                    {/* 搜索框区域 */}
                    <div className="detail-list">
                      <List listClass={this.state.listClass} data={this.props.category.cateList}></List>
                    </div>
                </div>
            </div>
           
        )
    }
}

export default connect((state)=>{return {...state}}, actions)(Register);